<template>
  <div style="min-width: 809px">
    <div v-if="$route.path == '/rewardStatistics'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="提成方式">
            <el-select
              v-model="paging.type"
              placeholder="请选择"
              style="width: 250px"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="国籍">
            <el-select
              style="width: 250px"
              clearable
              v-model="paging.nationality"
              placeholder=""
            >
              <el-option label="中国" value="1"> </el-option>
              <el-option label="泰国" value="2"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
            <!-- <el-button @click="setRow(1)" >新增</el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
          <el-button style="margin-left: auto" type="primary" @click="setRow(1)"
            >新增</el-button
          >
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
        >
          <el-table-column width="80" label="序号" prop="id"></el-table-column>
          <el-table-column label="国籍" min-width="150">
            <template slot-scope="scope">
              {{ scope.row.nationality == 1 ? "中国" : "泰国" }}
            </template>
          </el-table-column>
          <el-table-column label="提成方式" min-width="150">
            <template slot-scope="scope">
              {{ scope.row.type == 1 ? "百分比提成" : "时长提成" }}
            </template>
          </el-table-column>
          <el-table-column label="点钟奖励" min-width="150">
            <template slot-scope="scope">
              <span>满{{ scope.row.num }}个，奖励{{ scope.row.money }}元</span>
            </template>
          </el-table-column>
          <!-- <el-table-column  label="数量" min-width="150" prop="num"></el-table-column> -->
          <!-- <el-table-column  label="满奖的金额" min-width="150" prop="money"></el-table-column> -->
          <el-table-column fixed="right" width="109" label="操作">
            <template slot-scope="scope">
              <span @click="setRow(2, scope.row)" class="tab-table-text"
                >编辑</span
              >
              <span @click="setRow(3, scope.row)" class="tab-red-text"
                >删除</span
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      width="600px"
      :close-on-click-modal="false"
      :before-close="handleClose"
      :title="form.id ? '修改点钟奖励设置' : '添加点钟奖励设置'"
      :visible.sync="isAdd"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="140px">
        <el-form-item prop="type" label="提成方式">
          <el-select
            v-model="form.type"
            placeholder="请选择"
            style="width: 280px"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="num" label="数量">
          <el-input
            v-model="form.num"
            placeholder="请输入"
            style="width: 280px"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item prop="money" label="满奖的金额">
          <el-input
            v-model="form.money"
            placeholder="请输入"
            style="width: 280px"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item prop="nationality" label="国籍">
          <el-radio-group v-model="form.nationality">
            <el-radio :label="1">中国</el-radio>
            <el-radio :label="2">泰国</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="subitm">确 定</el-button>
      </span>
    </el-dialog>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          id: 1,
          title: "百分比提成",
        },
        {
          id: 2,
          title: "时长提成",
        },
      ],
      isAdd: false,
      recordList: [],
      loading: false,
      loading2: false,
      isBtn: false,
      isInfo: false,
      dialogVisible: false,
      paging: {
        type: "",
        page: 1,
        total: 0,
        limit: 10,
        nationality:''
      },
      rules: {
        type: { required: true, message: "请选择提成方式", trigger: "change" },
        num: { required: true, message: "请输入数量", trigger: "blur" },
        money: { required: true, message: "请输入满奖的金额", trigger: "blur" },
        nationality: {
          required: true,
          message: "请选择国籍",
          trigger: "change",
        },
      },
      form: {
        type: "",
        num: "",
        money: "",
        id: "",
        nationality: 1,
      },
      tableData: [],
    };
  },
  created() {
    if (this.$route.path == "/rewardStatistics") {
      this.handleCurrentChange(1);
      // this.homegetStore()
    }
  },
  methods: {
    changeDate(e) {
      let time = this.utils.timeMonth(e);
      this.form.date = time;
    },
    // 获取门店列表
    async homegetStore() {
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        this.options = data;
      }
    },
    subitm() {
      this.$refs["form"].validate(async (valid) => {
        if (!valid) return;
        console.log(this.form, "this.form");
        let { code } = await this.$Http.setClockReward(this.form);
        if (code) {
          this.$message.success(this.form.id ? "修改成功" : "添加成功");
          this.handleCurrentChange(1);
          this.handleClose();
        }
      });
    },
    async setRow(type, row) {
      if (type == 1) {
        //新增
        this.isAdd = true;
      } else if (type == 2) {
        //编辑
        this.isAdd = true;
        setTimeout(() => {
          this.form = Object.assign({}, row);
        }, 200);
      } else {
        //删除
        this.$msgbox({
          title: "提示",
          message: "确定要删除该奖励统计吗?",
          type: "warning",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: async (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "执行中...";
              let { code, data } = await this.$Http.delClockReward({
                id: row.id,
              });
              if (code) {
                this.$message.success("删除成功!");
                this.handleCurrentChange(1);
              }
              done();
              instance.confirmButtonLoading = false;
            } else {
              done();
            }
          },
        })
          .then((action) => {})
          .catch(() => {});
      }
    },
    handleClose(dom) {
      this.$refs["form"].resetFields();
      this.form = this.$options.data().form;
      this.isAdd = false;
      dom && dom();
    },
    async repairGetList() {
      this.loading = true;
      let { code, data } = await this.$Http.getClockReward(this.paging);
      this.loading = false;
      if (code) {
        this.tableData = data.data;
        this.paging.limit = data.per_page;
        this.paging.total = data.total;
      }
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      this.form.date = "";
      this.handleCurrentChange(1);
    },
    handleSizeChange(val) {
      this.paging.limit = val;
      this.repairGetList();
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.repairGetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
</style>